<template>
    <div id="container">
      <div class="buttons">
        <el-button @click="changeType('huabi')" type="primary">画笔</el-button>
        <el-button @click="changeType('rect')" type="success">正方形</el-button>
        <el-button @click="changeType('arc')" type="warning" style="margin-right: 10px">圆形</el-button>
        <div>颜色：</div>
        <el-color-picker v-model="state.color"></el-color-picker>
        <el-button @click="revert">撤销</el-button>
        <el-button @click="recovery">恢复</el-button>
        <el-button @click="clear">清空</el-button>
        <el-button @click="saveImg">保存</el-button>
      </div>
      <canvas  id="Canvas" width="800" height="400" @mousedown="canvasDown" @mousemove="canvasMove" @mouseup="canvasUp"></canvas>
    </div>
  </template>
  
  <script lang="ts" setup>
  import useCanvas from '@/hooks/useCanvas'
  const {
    changeType,
        recovery,
        revert,
        saveImg,
        clear,
        canvasDown,
        canvasMove,
        canvasUp,
        state,
  }  = useCanvas()
  </script>
  
  <style scoped>
  #container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .buttons {
    margin-bottom: 10px;
    display: flex;
  }
  #canvas {
    border: 1px solid black;
  }
  </style>